<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/marvin.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">

		<style>
			.paper {
				box-sizing: border-box;
				border: 0.5px solid gray;
				width:  510.5px;
				height: 600.5px;
				background-size: 30px 30px;
				background-image:
					linear-gradient(to right, grey 0.5px, transparent 0.5px),
					linear-gradient(to bottom, grey 0.5px, transparent 0.5px);
			}

			.curve {
				position: absolute;
				box-sizing: border-box;

				top: 80px;
				width: 410.5px;
				height: 550.5px;
				border-top-right-radius: 410.5px 550.5px;
				border-top:   1px solid crimson;
				border-right: 1px solid crimson;
			}
		</style>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">

				<section>
					<h2>人工智能概述</h2>
					<div class="sub-title">Introduction to Artificial Intelligence</div>
				</section>

				<section data-auto-animate data-auto-animate-id="1">
					<div class="r-vstack">
						<div data-id="title">你觉得「人工智能」究竟是什么?</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="1">
					<div class="r-vstack">
						<div data-id="title" style="font-size: 50%;">是这些热门的词汇吗?</div>
						<div class="r-hstack" style="letter-spacing: -0.1rem;">
							<ul>
								<li>神经网络</li>
								<li>机器学习</li>
								<li>深度学习</li>
								<li>专家系统</li>
								<li>统计学习</li>
								<li>决策树</li>
							</ul>
							<ul>
								<li>TenserFlow</li>
								<li>XGBoost</li>
								<li>PyTorch</li>
								<li>VGG19</li>
								<li>LSTM</li>
								<li>LISP</li>
							</ul>
						</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="1">
					<div>... ...这些都不用管</div>
				</section>

	
				<section data-auto-animate data-auto-animate-id="2">
					<div class="r-vstack">
						<div data-id="title">「人工智能」这个名字是怎么来的?</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="2">
					<div class="r-vstack">
						<div data-id="title">「人工智能」这个名字是怎么来的?</div>
						<div class="r-hstack">
							<img width="273" src="./assets/OIP-C.jpeg" />
						</div>
						<div>(他非常后悔起了这么个酷炫的名字)</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="2">
					<div class="r-vstack">
						<div data-id="title">「人工智能」这个名字是怎么来的?</div>
						<div class="r-hstack">
							<div>
								<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/R-C.jpeg" /></div>
								<div style="font-size: 40%;">Marvin Minsky</div>
							</div>
							<div>
								<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/OIP-C.jpeg" /></div>
								<div style="font-size: 40%;">John McCarthy</div>
							</div>
							<div>
								<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/R-C1.jpeg" /></div>
								<div style="font-size: 40%;">John Von Neumann</div>
							</div>
							<div>
								<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/Shannon.jpeg" /></div>
								<div style="font-size: 40%;">Claude Shannon</div>
							</div>
						</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="2">
					<div class="r-vstack">
						<div data-id="title">「人工智能」这个名字是怎么来的?</div>
						<div class="r-hstack">
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/R-C.jpeg" /></div>
								<div style="font-size: 40%;">Marvin Minsky</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/OIP-C.jpeg" /></div>
								<div style="font-size: 40%;">John McCarthy</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/R-C1.jpeg" /></div>
								<div style="font-size: 40%;">John Von Neumann</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/Shannon.jpeg" /></div>
								<div style="font-size: 40%;">Claude Shannon</div>
							</div>
						</div>
						<div class="r-hstack">
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/turing.jpeg" /></div>
								<div style="font-size: 40%;">Alan Turing</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/alonzo.jpeg" /></div>
								<div style="font-size: 40%;">Alonzo Church</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/wiener.jpeg" /></div>
								<div style="font-size: 40%;">Norbert Wiener</div>
							</div>
							<div>
								<div style="height:240px; overflow:hidden;"><img style="margin:0.5rem;" width="180" src="./assets/godel.jpeg" /></div>
								<div style="font-size: 40%;">Kurt Gödel</div>
							</div>
						</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="3">
					<div data-id="title">「人工智能」用来做什么?</div>
				</section>

				<section data-auto-animate data-auto-animate-id="3">
					<div data-id="title">直观的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">当然是让机器像人一样做事情啊</div>
				</section>

				<section data-auto-animate data-auto-animate-id="3">
					<div data-id="title">直观的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">当然是让机器像人一样做事情啊</div>
					<div class="r-hstack">
						<div>
							<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/cus-service.jpg" /></div>
						</div>
						<div>
							<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/robot.jpeg" /></div>
						</div>
						<div>
							<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/face-recog.jpeg" /></div>
						</div>
						<div>
							<div style="height:260px; overflow:hidden;"><img style="margin:0.5rem;" width="203" src="./assets/chess.jpeg" /></div>
						</div>
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="3">
					<div data-id="title">直观的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">当然是让机器像人一样做事情啊</div>
					<div class="r-hstack">
						宏观的表达意味着大量的学科交叉
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="3">
					<div data-id="title">直观的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">当然是让机器像人一样做事情啊</div>
					<div class="r-hstack">
						语音/图像识别、语音/图像合成、自动化与控制系统、材料科学……
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="4">
					<div data-id="title">更具体的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">像人一样记忆、演算、<br>推理、证明、联想、解释、学习……</div>
					<div class="r-hstack">
						精确的表达意味着具体的任务
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="4">
					<div data-id="title">更具体的表达:</div>
					<div data-id="title" style="font-size: 140%; font-weight: bold;">像人一样记忆、演算、<br>推理、证明、联想、解释、学习……</div>
					<div class="r-hstack">
						计算机科学<br>(Computer Science)
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="4">
					<div class="r-hstack">
						「计算机科学」这一学科<br>接管了最初「人工智能」所关心的大部分问题，并成为了今天「人工智能」重要的基础设施
					</div>
				</section>

				<section data-auto-animate data-auto-animate-id="14">
					<div data-id="title"><h2>机器如何学习</h2></div>
				</section>

				<section data-auto-animate data-auto-animate-id="14">
					<div data-id="title"><h2>机器如何学习</h2></div>
					<div>笑话二则：《盲人老哥和冰牛奶》</div>
				</section>

				<section data-auto-animate data-auto-animate-id="14">
					<div data-id="title"><h2>机器如何学习</h2></div>
					<div>笑话二则：《自动阅卷机器》</div>
				</section>

				<section  data-auto-animate>
					<div data-id="title" style="display: flex; justify-content: center;"><div data-id="know">知识</div>、<div data-id="conc">概念</div>、<div data-id="errr">偏差</div></div>
				</section>

				<section  data-auto-animate>
					<ul>
						<li style="margin:10px; display: flex; align-items: baseline;"><div style="margin:10px;" data-id="know">知识</div><div style="font-size: 60%;">a.k.a「数据」</div></li>
						<li style="margin:10px; display: flex; align-items: baseline;"><div style="margin:10px;" data-id="conc">概念</div><div style="font-size: 60%;">a.k.a「模型」</div></li>
						<li style="margin:10px; display: flex; align-items: baseline;"><div style="margin:10px;" data-id="errr">偏差</div><div style="font-size: 60%;">a.k.a「误差」</div></li>
					</ul>
				</section>

				<section data-auto-animate  data-auto-animate-id="5">
					<div class="r-vstack">
						<div data-id="title">复习：小铁球平抛运动 (fitting) </div>
						<canvas class="paper" id="paper" data-id="paper" width="510.5px" height="600.5px"/>
					</div>
				</section>

				<section data-auto-animate  data-auto-animate-id="5">
					<div class="r-vstack">
						<div data-id="title">复习：小铁球平抛运动 (interpolation)</div>
						<canvas class="paper" id="paper1" data-id="paper" width="510.5px" height="600.5px"/>
					</div>
				</section>

				<section data-auto-animate  data-auto-animate-id="5">
					<img src="assets/R.jpeg">
				</section>

				<section data-auto-animate  data-auto-animate-id="5">
					<div class="r-vstack">
						<div data-id="title">模型太简单<br>以至于无法准确反映大部分的知识</div>
						<div style="font-size: 50%;">（欠拟合 - underfitting）</div>
					</div>
				</section>

				<section data-auto-animate  data-auto-animate-id="5">
					<div class="r-vstack">
						<div data-id="title">模型太复杂<br>太依赖<b>部分</b>已经获得的知识</div>
						<div style="font-size: 50%;">（过拟合 - overfitting）</div>
					</div>
				</section>

				<section>
					<div data-id="title" style="font-size: 160%; font-weight: bold;">回顾一下……</div>
					<ul>
						<li style="margin: 10px;">在你的头脑中，哪些是<b>知识</b>，哪些是<b>概念</b>？</li>
						<li style="margin: 10px;">你能描述一下你「弄明白」一件事的过程吗？</li>
					</ul>
				</section>

				<section data-auto-animate data-auto-animate-id="31">
					<div data-id="title" style="font-size: 160%; font-weight: bold;">Takeaways</div>
					<ul>
						<li>人工智能的历史</li>
					</ul>
				</section>

				<section data-auto-animate data-auto-animate-id="31">
					<div data-id="title" style="font-size: 160%; font-weight: bold;">Takeaways</div>
					<ul>
						<li>人工智能的历史</li>
						<li>知识、概念、偏差</li>
					</ul>
				</section>

				<section data-auto-animate data-auto-animate-id="31">
					<div data-id="title" style="font-size: 160%; font-weight: bold;">Takeaways</div>
					<ul>
						<li>人工智能的历史</li>
						<li>知识、概念、偏差</li>
						<li>有意识地观察自己是如何学习的</li>
					</ul>
				</section>

				<section data-auto-animate data-auto-animate-id="31">
					<div data-id="title" style="font-size: 160%; font-weight: bold;">Takeaways</div>
					<ul>
						<li>人工智能的历史</li>
						<li>知识、概念、偏差</li>
						<li>有意识地观察自己是如何学习的</li>
						<li>用精确、全面的语言表达(一切)</li>
					</ul>
				</section>

				<section>就这些。</section>

			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			})
			.then(() => {

				const div = document.getElementById('paper');
				const {width, height} = div.getBoundingClientRect();

				const ctx = div.getContext('2d');

				const points= [];

				const drawPoints = () => {

					const initVelo = Math.random()*2 + 9;

					ctx.fillStyle = 'rgba(128, 110, 31, 0.8)';

					for (let i = 0; i < 100; i++) {

						const point = {
							x: i*initVelo+5 + (Math.random()*i*5 - i*2.5), 
							y: i*i*0.5 + (Math.random()*i*2 - i)
						}

						ctx.beginPath();
						ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
						ctx.fill();
					}

				}

				const drawCurve = () => {
					ctx.fillStyle = undefined;
					ctx.strokeStyle = '1px solid red';
					ctx.beginPath();
					ctx.moveTo(5, 0);
					for (let i = 0; i < 100; i++) {
						ctx.lineTo(i*10+5, i*i*0.5);
					}
					ctx.stroke();
				}

				div.addEventListener('click', (e) => {
					drawPoints();
				})

				div.addEventListener('contextmenu', (e) => {
					e.preventDefault();
					e.stopPropagation();
					console.log('curve');
					drawCurve();
				})
			});

			const div1 = document.getElementById('paper1');
			const {width, height} = div1.getBoundingClientRect();

			const ctx1 = div1.getContext('2d');

			const points1= [];

			const drawPoints = () => {

				const initVelo = Math.random()*2 + 9;

				ctx1.fillStyle = 'rgba(128, 110, 31, 0.8)';

				for (let i = 0; i < 100; i++) {

					const point = [
						i*initVelo+5 + (Math.random()*i*5 - i*2.5), 
						i*i*0.5 + (Math.random()*i*2 - i)
					]

					points1.push(point);

					ctx1.beginPath();
					ctx1.arc(...point, 3, 0, 2 * Math.PI);
					ctx1.fill();
				}
			}

			function sub(a, b) {
				return [a[0] - b[0], a[1] - b[1]];
			}

			function add(a, b) {
				return [a[0] + b[0], a[1] + b[1]];
			}

			function mult(v, s) {
				return [v[0] * s, v[1] * s];
			}

			function dist(a) {
				return Math.hypot(a[0], a[1]);
			}

			function getP(head, body, tail, t=0.5){
				var d01 = dist(sub(body, head));
				var d12 = dist(sub(tail, body));
				[fa, fb] = [d01/(d01+d12)*t, d12/(d01+d12)*t];

				var p1 = sub(body, mult(sub(tail,head), fa));
				var p2 = add(body, mult(sub(tail,head), fb));
				return [p1, p2];
			}

			function interpolate(points) {
				const len = points.length;
				const newP = [];
				for (let i = 1; i < len - 1; i++) {
					const [p1, p2] = getP(...points.slice(i-1, i+2));
					newP.push(p1, points[i], p2);
				}
				newP.unshift(points[0], points[0]);
				newP.push(points.at(-1), points.at(-1));
				return newP;
			}

			const drawInterpolateCurve = () => {
				const [first, ...rest] = interpolate(points1);

				ctx1.fillStyle = undefined;
				ctx1.strokeStyle = '1px solid red';
				ctx1.beginPath();

				console.log(first);
				ctx1.moveTo(...first);
				for (let i = 0; i < points1.length; i+=3) {
					const [cp1, cp2, p] = rest.slice(i, i+3);
					ctx1.bezierCurveTo(...cp1, ...cp2, ...p);
				}
				ctx1.stroke();

			}

			div1.addEventListener('click', (e) => {
				drawPoints();
			})

			div1.addEventListener('contextmenu', (e) => {
				e.preventDefault();
				e.stopPropagation();
				drawInterpolateCurve();
 			});

		</script>
	</body>
</html>
